<template>
  <div id="home">
    <!-- 头部导航 -->
    <mainnav> </mainnav>
    <tabcontrol
      :titles="goodstypelist"
      @tabclick="tabclick"
      class="toptabcontrol"
      v-show="toptabcontrol"
      ref="toptabcontrol"
    />
    <!-- <div style="height: 44px"></div> -->
    <!-- 轮播图 -->
    <scroll
      class="content"
      ref="scroll"
      :probeType="3"
      @scroll="onscroll"
      :pullUpLoad="true"
      @pullingUp="loadmore"
    >
      <mainswiper :banners="banners" @swiperimgload="swiperimgload" />
      <!-- 推荐 -->
      <recommend :recommend="recommends" />
      <!-- 流行物品 -->
      <featureview />

      <tabcontrol
        :titles="goodstypelist"
        @tabclick="tabclick"
        ref="tabcontrol"
      />
      <goodshow :goodlist="showgood" />
    </scroll>
    <backtop @click="homebacktop" v-if="backtopshow" />
  </div>
</template>

<script>
import mainnav from "@/views/home/children/mainnav";

import scroll from "@/components/common/better-scroll/scroll";

import mainswiper from "@/views/home/children/mainswiper";
import recommend from "./children/recommendView";
import featureview from "./children/featureView";

import tabcontrol from "@/components/content/Tabcontrol/Tabcontrol";
import goodshow from "@/components/content/goodsShow/goodShow";
import backtop from "@/components/common/BackTop/backtop";

import { GetHomeMultData } from "@/network/home";
import { Getgoods } from "@/network/home";
import { getRecommend } from "@/network/recommend";
import { itemListentermixin, backTop } from "@/common/mixin";

export default {
  name: "home",
  data() {
    return {
      banners: [], //轮播图
      recommends: [], //推荐
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      goodstypelist: ["流行", "新款", "精选"],
      goodcountstype: ["pop", "new", "sell"],
      goodshows: "pop",
      toptabcontrol: false, //狸猫换太子是否显示
      tabcontroltopoffect: 0, //获取 太子offsettop
      scrolley: 0,
    };
  },
  components: {
    mainnav,
    mainswiper,
    recommend,
    featureview,
    tabcontrol,
    goodshow,
    scroll,
  },
  mixins: [itemListentermixin, backTop],
  mounted() {
    this.$bus.$on("homeimgload", () => {
      //监听图片加载完后
      this.newRefresh();
    });
    //所有的组件都有一个el属性，  获取html元素
    // console.log(this.$refs.tabcontrol.$el.offsetTop);
  },
  created() {
    this.getmuldata();
    this.getgoods("pop");
    this.getgoods("new");
    this.getgoods("sell");
    getRecommend().then((res) => {
      console.log("我请求了推荐");
      this.$store.commit("addrecommend", res.data.list);
    });
  },
  methods: {
    getmuldata() {
      GetHomeMultData()
        .then((result) => {
          this.banners = result.data.banner.list;
          this.recommends = result.data.recommend.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getgoods(type) {
      let page = this.goods[type].page + 1;
      Getgoods(type, page)
        .then((res) => {
          this.goods[type].list.push(...res.data.list); //获取到新的数据，会自动加进去
          this.$refs.scroll.finishPullUp();
        })
        .catch((err) => {
          console.log(err);
        });

      // this.$refs.scroll.finshPullUp();
      // console.log(this.$refs.scroll.scroll);
      // this.$refs.scroll.scroll.finshpullUp();
    },
    tabclick(index) {
      this.goodshows = this.goodcountstype[index];
      this.$refs.toptabcontrol.currentindex = index;
      this.$refs.tabcontrol.currentindex = index;
      console.log(index);
    },
    homebacktop() {
      // this.$refs.scroll.scrollTo(0, 0, 500); //调用组件的方法
      this.backtop();
    },
    onscroll(position) {
      //下拉  显示回到顶部
      this.Showbacktop(position);
      this.toptabcontrol = -position.y > this.tabcontroltopoffect; //狸猫换太子  是否显示
    },
    loadmore() {
      this.getgoods(this.goodshows);
      // this.$refs.scroll.scroll.refresh();
    },
    swiperimgload() {
      this.tabcontroltopoffect = this.$refs.tabcontrol.$el.offsetTop;
    },
  },
  computed: {
    showgood() {
      return this.goods[this.goodshows].list;
    },
  },
  activated() {
    //调用离开时的高度  做到记录效果
    this.$refs.scroll.refresh();
    this.$refs.scroll.scrollTo(0, this.scrolley, 0);
  },
  deactivated() {
    //记录组件离开的高度
    this.scrolley = this.$refs.scroll.scroll.y;
  },
};
</script>

<style scoped>
#home {
  height: 100vh;
  padding-top: 44px;
  position: relative;
}
.content {
  /* height: 300px; */
  overflow: hidden;
  position: absolute;
  top: 44px;
  bottom: 49px;
}
/* .content {
  height: calc(100% - 98px);
  overflow: hidden;
} */
/* isfiexd {
  position: relative;
  top: 44px;
  z-index: 9;
  left: 0;
  right: 0;
} */
.toptabcontrol {
  position: relative;
  z-index: 99;
  left: 0;
  right: 0;
}
</style>